<template>
	<view class="section section-detail">
		<view class="product_info_rank">
			<view class="card-box">
				<view class="tab-header">
					<view class="tab-header-inner">
						<block v-for="(item, index) in tabList" :key="index">
							<view class="tab-item " :class="tabIndex==index?'active':''" @click="tabIndex=index">
								{{item.name}}
							</view>
						</block>

					</view>
				</view>

				<view class="tab-view">
					<swiper @change="swiperChange">
						<swiper-item v-for="(item, index) in related_recommend" :key="index" class="swiper-item">
							<block v-for="(i, j) in item" :key="j">
								<view class="product-item" @click="toShopDetail(i.action)">
									<view class="product-img">
										<LazyLoad :src="i.image_url" width='100%'  height='100%'></LazyLoad>
									</view>
									<view class="product-name">
										{{i.name}}
									</view>
									<view class="product-price price">
										￥{{i.price}}
										<text class="qi" v-if="i.is_multi_price">起</text>
										<text class="market-price"
											v-if="i.price!==i.market_price">￥{{i.market_price}}</text>
									</view>
								</view>
							</block>
						</swiper-item>
					</swiper>

					<view class="indicator">
						<view v-for="(swiper, index) in related_recommend" :key="index" :style="{
												 width:`${(1/related_recommend.length*100)}%`,
												'background-color':currentSwiper === index? '#666666' : '#eee',
											}"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="blank_line ">

		</view>
	</view>
</template>

<script>
	import LazyLoad from '../LazyLoad/LazyLoad.vue'
	export default {
		name: "product_info_rank",
		components:{LazyLoad},
		props: ['product_id', 'hot_parts'],
		data() {
			return {
				currentSwiper: 0,
				related_recommend: [],
				isHot: true,
				title: '',
				tabIndex: 0,
				dataList: []
			};
		},
		watch: {
			tabIndex: {
				handler(newVal) {
					if (newVal == 0) {
						this.related_recommend = this.dataList
					} else {
						this.related_recommend = [this.hot_parts.parts]
					}
				},
				immediate: true
			}
		},
		computed: {
			tabList() {
				let list = []
				if (this.hot_parts && this.hot_parts.title) {
					list.push({
						name: this.hot_parts.title
					})
				} else if (this.title) {
					list.push({
						name: this.title
					})
				}
				return list
			}

		},
		mounted() {
			this.getRecomData(this.product_id)
		},
		methods: {
			toShopDetail(action) {
				if (action.productId && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.productId}`
					})
				} else if (action.path && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.path}`
					})
				}
			},
			getRecomData(product_id) {
				this.$request.get('/getRecomData', {
					'product_id': product_id,
				}).then((res) => {
					this.title = res.data.data.related_recommend.title
					let list = res.data.data.related_recommend.data
					let num = 6;
					for (let i = 0, len = list.length; i < len; i += num) {
						this.dataList.push(list.slice(i, i + num));
					}
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			}
		}

	}
</script>

<style lang="scss" scoped>
	.indicator {
		position: absolute;
		bottom: .2rem;
		background: #666666;
		width: 0.96rem;
		height: 0.04rem;
		border-radius: 0.03rem;
		overflow: hidden;
		display: flex;
		transform: translate(-50%, 0);
		left: 50%;

	}

	.blank_line {
		height: 0.2rem;
		background: rgb(246, 246, 246);
		width: 100%;
		transform: translateZ(0);
		margin-top: -1px;
	}

	.section-detail {
		view {
			line-height: 1.15;
		}

		.product_info_rank {
			.card-box {
				padding: 0 0.32rem 0.4rem;

				.tab-header {
					margin-bottom: 0.2rem;
					height: 0.72rem;

					.tab-header-inner {
						height: 0.8rem;
						align-items: center;
						display: flex;

						.tab-item {
							text-align: center;
							display: block;
							font-size: .24rem;
							font-weight: 700;
							width: 100%;

							&:last-child {
								border-right: none;
							}
						}

						.active {
							color: #ff6700;
							position: relative;

							&::after {
								content: "";
								background-color: #ff6700;
								width: 0.32rem;
								height: 0.04rem;
								border-radius: 0.03rem;
								position: absolute;
								top: 0.4rem;
								left: 50%;
								transform: translateX(-50%);
							}
						}
					}
				}

				.tab-view {
					position: relative;

					uni-swiper {
						height: 7.8rem;
					}

					.swiper-item {

						display: flex;
						flex-wrap: wrap;
						justify-content: flex-start;

						.product-item {
							display: block;
							margin-bottom: 0.35rem;
							width: 2.08rem;

							&:not(:nth-child(3n)) {
								margin-right: 0.15rem;
							}

							.product-img {
								display: block;
								margin-bottom: 0.16rem;
								height: 2.08rem;
								border-radius: 0.16rem;
								background-color: #f7f7f7;
								overflow: hidden;

								image {
									display: block;
									width: 100%;
									height: 100%;
								}
							}

							.product-name {
								margin-bottom: 0.09rem;
								font-size: .24rem;
								line-height: 1.5em;
								height: 3em;
								text-align: left;
								color: #000;
								text-overflow: ellipsis;
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
							}
						}

						.product-price {
							display: block;
							font-size: .24rem;
							text-align: left;
							font-weight: 600;
							color: #ff6700;

							.qi {
								margin-left: 0.01rem;
								font-size: .16rem;
								font-weight: 400;
							}

							.market-price {
								margin-left: 0.08rem;
								font-size: .2rem;
								color: rgba(0, 0, 0, .3);
								text-decoration: line-through;
								font-weight: 400;
							}
						}

						.price {
							position: relative;
							line-height: 1em;
						}
					}

				}
			}
		}
	}
</style>